<template>
	<view>
		<uv-navbar title="编辑" bg-color="#FFFFFF" :placeholder='true' leftIconSize="20px" leftIconColor="#313C56"
			:autoBack='true' titleStyle="font-size: 16px;font-weight: 500;color: #313c56;" />
		<scroll-view :scroll-y="true" :style="{height: $uv.addUnit(scrollHeight)}">
			<view class="flex-column" style=" width: calc(100vw); margin-top: 8px;">
				<view class="flex-row flex-items-center font-14 font-weight-regular"
					style="color: #313C56;margin-left: 16px;">
					<image src="../../static/xinghao.png" style="width: 8px; height: 8px; margin-right: 4px;"></image>
					<text>昵称</text>
				</view>
				<uv-input v-model="params.nickname" maxlength="15" placeholder="请输入"
					placeholderStyle="color: #B7C0CA; font-size: 16px;" fontSize="16px" color="#313C56" border="none"
					customStyle="marginTop: 8px; marginLeft: 12px"></uv-input>
				<view
					style="margin-left: 16px; width: calc(100% - 32px); height: 1px; background-color: #F7F9FD; margin-top: 8px;">
				</view>
				<text class="font-14 font-weight-regular"
					style="color: #313C56; margin-top: 16px; margin-left: 16px;">添加头像</text>
				<view style="margin-top: 16px; margin-left: 16px;">
					<uv-upload :fileList="fileList" :maxCount="1" width="80" height="80" @afterRead='choosedImages'
						@delete="deleteImages">
						<view class="flex-row-center"
							style="background-color: white; width: 80px; height: 80px; border: 1px solid #EFF0F4;">
							<image src="../../static/add.png" style="width: 28px;height: 28px;"></image>
						</view>
					</uv-upload>
				</view>
				<view
					style="width: 100%; height: 1px; background-color: #F7F9FD; margin-top: 24px; margin-left: 16px; width: calc(100% - 32px);">
				</view>
				<view class="flex-row flex-items-center font-14 font-weight-regular"
					style="color: #313C56; margin-top: 8px; margin-left: 16px;">
					<image src="../../static/xinghao.png" style="width: 8px; height: 8px; margin-right: 4px;"></image>
					<text>技能标签</text>
				</view>
				<view class="flex-row flex-wrap font-12 font-weight-regular"
					style="color: #313C56; margin-left: 16px; width: calc(100% - 32px);">
					<view v-for="(item,index) in labels" :key="index" class="flex-row flex-items-center">
						<image v-if="item == 'tempAdd' " src="../../static/addicon.png"
							style="width: 16px; height: 16px; margin-left: 4px; "
							:style="{marginTop: index == 0 ? '15px' : '5px'}" @click="showLabelInputPopup"></image>
						<view v-else class="flex-row flex-items-center"
							style="height: 32px; border-radius: 6px; padding-left: 16px; padding-right: 13px; background-color: #F7F9FD; margin-right: 8px; margin-top: 8px;">
							<text>{{ item }}</text>
							<image src="../../static/close.png" style="width: 16px; height: 16px; margin-left: 4px;"
								@click="labels.splice(index, 1)">
							</image>
						</view>

					</view>
				</view>
				<view
					style="margin-left: 16px; width: calc(100% - 32px); height: 1px; background-color: #F7F9FD; margin-top: 10px;">
				</view>
				<view class="flex-row flex-items-center font-14 font-weight-regular"
					style="color: #313C56; margin-top: 8px; margin-left: 16px;">
					<image src="../../static/xinghao.png" style="width: 8px; height: 8px; margin-right: 4px;"></image>
					<text>个人简介</text>
				</view>
				<view class="flex-row flex-items-center" style="margin-top: 8px; margin-left: 16px; margin-right: 16px;"
					@click="intoInfo(1000)">
					<uv-input v-model="params.introduction" disabled maxlength="15" placeholder="请输入"
						placeholderStyle="color: #B7C0CA; font-size: 16px;" fontSize="16px" color="#313C56"
						border="none" dis disabled-color="white" tomStyle="marginLeft: -4px"></uv-input>
					<image src="../../static/arrow-right.png" style="height: 16px; width: 16px;"></image>
				</view>

				<view v-for="(item,index) in projects" :key="index">
					<view class="font-14 font-weight-regular flex-row flex-items-center flex-between"
						style="height: 46px; width: 100%; background-color: #F7F9FD; color: #313C56;"
						:style="{marginTop: index == 0 ? '8px' : ''}">
						<text style="margin-left: 16px;">
							{{ `项目${$tools.toChinese(index + 1)}` }}
						</text>
						<view class="flex-row-center" style="height: 40px;" @click="deleteProject(index)">
							<image src="../../static/close.png" style="width: 22px; height: 22px; margin-right: 16px;">
							</image>
						</view>
					</view>
					<view class="flex-row flex-items-center font-14 font-weight-regular"
						style="color: #313C56; margin-top: 8px; margin-left: 16px;">
						<image src="../../static/xinghao.png" style="width: 8px; height: 8px; margin-right: 4px;">
						</image>
						<text>项目名称</text>
					</view>
					<uv-input v-model="item.name" maxlength="15" placeholder="请输入"
						placeholderStyle="color: #B7C0CA; font-size: 16px;" fontSize="16px" color="#313C56"
						border="none" customStyle="marginTop: 8px; marginLeft: 12px"></uv-input>
					<view
						style="margin-left: 16px; width: calc(100% - 32px); height: 1px; background-color: #F7F9FD; margin-top: 10px;">
					</view>
					<view class="flex-row flex-items-center font-14 font-weight-regular"
						style="color: #313C56; margin-top: 8px; margin-left: 16px;">
						<image src="../../static/xinghao.png" style="width: 8px; height: 8px; margin-right: 4px;">
						</image>
						<text>项目开始日期</text>
					</view>
					<view class="flex-row flex-items-center"
						style="margin-top: 8px; margin-left: 16px; margin-right: 16px;"
						@click="openDatePicker(index, true)">
						<uv-input v-model="item.start" disabled maxlength="15" placeholder="请选择"
							placeholderStyle="color: #B7C0CA; font-size: 16px;" fontSize="16px" color="#313C56"
							border="none" dis disabled-color="white" tomStyle="marginLeft: -4px"></uv-input>
						<image src="../../static/arrow-right.png" style="height: 16px; width: 16px;"></image>
					</view>
					<view
						style="margin-left: 16px; width: calc(100% - 32px); height: 1px; background-color: #F7F9FD; margin-top: 8px;">
					</view>
					<view class="flex-row flex-items-center font-14 font-weight-regular"
						style="color: #313C56; margin-top: 8px; margin-left: 16px;">
						<image src="../../static/xinghao.png" style="width: 8px; height: 8px; margin-right: 4px;">
						</image>
						<text>项目结束日期</text>
					</view>
					<view class="flex-row flex-items-center"
						style="margin-top: 8px; margin-left: 16px; margin-right: 16px;"
						@click="openDatePicker(index, false)">
						<uv-input v-model="item.end" disabled maxlength="15" placeholder="请选择"
							placeholderStyle="color: #B7C0CA; font-size: 16px;" fontSize="16px" color="#313C56"
							border="none" dis disabled-color="white" tomStyle="marginLeft: -4px"></uv-input>
						<image src="../../static/arrow-right.png" style="height: 16px; width: 16px;"></image>
					</view>
					<view
						style="margin-left: 16px; width: calc(100% - 32px); height: 1px; background-color: #F7F9FD; margin-top: 8px;">
					</view>
					<view class="flex-row flex-items-center font-14 font-weight-regular"
						style="color: #313C56; margin-top: 8px; margin-left: 16px;">
						<image src="../../static/xinghao.png" style="width: 8px; height: 8px; margin-right: 4px;">
						</image>
						<text>项目描述</text>
					</view>
					<view class="flex-row flex-items-center"
						style="margin-top: 8px; margin-left: 16px; margin-right: 16px;" @click="intoInfo(index)">
						<uv-input v-model="item.detail" disabled maxlength="15" placeholder="请选择"
							placeholderStyle="color: #B7C0CA; font-size: 16px;" fontSize="16px" color="#313C56"
							border="none" dis disabled-color="white" tomStyle="marginLeft: -4px"></uv-input>
						<image src="../../static/arrow-right.png" style="height: 16px; width: 16px;"></image>
					</view>
				</view>

				<view
					style="margin-left: 16px; width: calc(100% - 32px); height: 1px; background-color: #F7F9FD; margin-top: 8px;">
				</view>
				<view class="flex-row flex-items-center flex-center font-16 font-weight-regular"
					style="width: 100%; height: 48px; color: #6B7885;" @click="addExperience">
					<image src="../../static/addicon.png" style="width: 16px; height: 16px; margin-right: 8px;"></image>
					<text>增加项目经历</text>
				</view>


			</view>
		</scroll-view>
		<view class="font-16 font-weight-regular flex-row-center"
			style="margin-top: 12px; margin-left: 36px; margin-right: 36px; height: 44px; border-radius: 22px; background-color: #EB7520; color: white;"
			@click="commit">
			提交
		</view>
		<uv-popup ref='labelInputPopup' mode="center" :closeOnClickOverlay="false" :safeAreaInsetBottom="false"
			round="8px" overlayOpacity="0.8">
			<view class="flex-column" style="width: calc(100vw - 32px); background-color: white;">
				<text class="font-18 font-weight-regular"
					style="margin-top: 20px; margin-left: 16px; color: black;">输入标签，不超过8个字</text>
				<uv-input v-model="addLabelText" placeholder="请输入" border="none"
					customStyle="marginTop: 20px; marginLeft:16px;" font-size="16px"></uv-input>
				<view class="edit-popup-btn flex-row-center"
					style="background-color: #EB7520; color: white; margin-top: 32px;" @click="labelInputPopupConfirm">
					确定
				</view>
				<view class="edit-popup-btn edit-popup-cancel flex-row-center" style="color: #313C56;"
					@click="$refs.labelInputPopup.close()">
					取消
				</view>
			</view>
		</uv-popup>
		<uv-datetime-picker ref="datetimePicker" v-model="date" mode="date" round="16px" cancelColor="#95A4B3"
			confirmColor="#EB7520" @confirm="datePickerConfirm">
		</uv-datetime-picker>
		<toast ref="toast"></toast>
	</view>
</template>

<script>
	import {
		editUserApi,
		getUserInfo
	} from "@/api/index.js"
	export default {
		data() {
			return {
				params: {
					nickname: '',
					headUrl: '',
					introduction: ''
				},
				fileList: [],
				labels: ['tempAdd'],
				addLabelText: '',
				projects: [],
				date: Number(new Date()),
				experienceIndex: 0,
				experienceFlag: true
			}
		},
		computed: {
			statusBarHeight() {
				const sys = uni.$uv.sys()
				return sys.statusBarHeight
			},
			navbarHeight() {
				return this.statusBarHeight + 44
			},
			screenWidth() {
				const sys = uni.$uv.sys()
				return sys.windowWidth
			},
			pageHeight() {
				const sys = uni.$uv.sys()
				return sys.windowHeight - this.navbarHeight
			},
			scrollHeight() {
				return this.pageHeight - this.toolbarHeight - 10
			},
			toolbarHeight() {
				const sys = uni.$uv.sys()
				return sys.safeAreaInsets.bottom + 68
			}
		},
		onLoad(info) {
			this.getUserInfo(info.id)
		},
		methods: {
			getUserInfo(id) {
				let params = {
					id: id
				}
				getUserInfo(params).then((data) => {
					this.params.nickname = this.$tools.empty(data.nickname)
					this.params.introduction = this.$tools.empty(data.introduction)
					if (!this.$uv.test.empty(data.headUrl)) {
						this.fileList.push({
							url: data.headUrl
						})
					}
					if (data.skills.length != 0) {
						let labels = []
						for (let i = 0; i < data.skills.length; i++) {
							labels.push(data.skills[i].detail)
						}
						labels.push('tempAdd')
						this.labels = labels
					}
					if (data.experience.length != 0) {
						let projects = []
						for (let i = 0; i < data.experience.length; i++) {
							let project = data.experience[i]
							projects.push({
								name: project.name,
								start: project.begin,
								end: project.end,
								detail: project.detail
							})
						}
						this.projects = projects
					}
				}).catch((e) => {})
			},
			commit() {
				console.log(JSON.stringify(this.projects))
				if (this.$uv.test.empty(this.params.nickname)) {
					this.$refs.toast.show({
						msg: '请输入昵称'
					})
					return
				}
				let skills = uni.$uv.deepClone(this.labels)
				skills.pop()
				if (skills.length == 0) {
					this.$refs.toast.show({
						msg: '请添加技能标签'
					})
					return
				}
				if (this.$uv.test.empty(this.params.introduction)) {
					this.$refs.toast.show({
						msg: '请输入个人简介'
					})
					return
				}

				if (this.projects.length == 0) {
					this.$refs.toast.show({
						msg: '请增加项目经历'
					})
					return
				}
				let msg = this.judgePlans()
				if (!this.$uv.test.empty(msg)) {
					this.$refs.toast.show({
						msg: msg
					})
					return
				}

				let params = uni.$uv.deepClone(this.params)
				if (this.fileList.length != 0) {
					params.headUrl = this.fileList[0].url
				}
				params.skills = skills.join(',')
				params.experience = JSON.stringify(this.projects)

				editUserApi(params).then((data) => {
					this.$refs.toast.show({
						msg: '编辑成功',
						isSuccees: true,
						complete: () => {
							this.$nextTick(() => {
								this.getOpenerEventChannel().emit('update')
								uni.navigateBack()
							})
						}
					})
				}).catch((err) => {})
			},
			deleteProject(index) {
				this.projects.splice(index, 1)
			},
			openDatePicker(experienceIndex, isStart) {
				this.experienceIndex = experienceIndex
				this.experienceFlag = isStart
				this.$refs.datetimePicker.open()
			},
			datePickerConfirm(e) {
				this.$nextTick(() => {
					let val = this.$uv.timeFormat(e.value, 'yyyy-mm-dd')
					if (this.experienceFlag) {
						this.projects[this.experienceIndex].start = val
					} else {
						this.projects[this.experienceIndex].end = val
					}
				})
			},
			/**
			 * 进入简介编辑页面
			 */
			intoInfo(index) {
				let title = index == 1000 ? '个人简介' : '项目描述'
				let value = index == 1000 ? this.params.introduction : this.projects[index].detail
				uni.navigateTo({
					url: `/pages/describe-edit/describe-edit?title=${title}&value=${value}`,
					events: {
						describeEdit: data => {
							console.log(index)
							if (index == 1000) {
								this.params.introduction = data
							} else {
								this.projects[index].detail = data
							}
						}
					}
				})
			},
			showLabelInputPopup() {
				this.addLabelText = ''
				this.$refs.labelInputPopup.open()
			},
			labelInputPopupConfirm() {
				if (this.addLabelText.length > 0) {
					if (this.labels.indexOf(this.addLabelText) == -1) {
						this.labels.splice(this.labels.length - 1, 0, this.addLabelText)
					} else {
						console.log('重复添加')
					}
				}
				this.$refs.labelInputPopup.close()
			},
			/**
			 * 删除图片
			 */
			deleteImages(event) {
				this.fileList.splice(event.index, 1)
			},
			/**
			 * 选择图片
			 */
			async choosedImages(event) {
				uni.showLoading({
					title: '正在上传...',
					mask: true
				})
				const a = await this.upload(event.file.url)
				setTimeout(function() {
					uni.hideLoading()
				}, 50)
				this.fileList.push({
					url: a
				})
			},
			/**
			 * 上传文件
			 */
			upload(url) {
				return new Promise((resolve, reject) => {
					uni.$uv.http.upload('api/front/upload', {
						filePath: url,
						name: 'file',
						validateStatus: (statusCode) => {
							return statusCode == 200
						}
					}).then(res => {
						// 返回的res.data 已经进行JSON.parse
						console.log(res)
						resolve(res)
					}).catch(err => {
						console.log(err)
						reject(err)
					})
				})
			},
			judgePlans() {
				let msg = ''
				if (this.projects.length == 0) {
					return msg
				}
				let last = this.projects[this.projects.length - 1]
				if (this.$uv.test.empty(last.name)) {
					msg = '请输入项目名称'
				} else if (this.$uv.test.empty(last.start)) {
					msg = '请选择开始时间'
				} else if (this.$uv.test.empty(last.end)) {
					msg = '请选择结束时间'
				} else if (this.$uv.test.empty(last.detail)) {
					msg = '请输入项目描述'
				}
				return msg
			},
			addExperience() {
				let msg = this.judgePlans()
				if (!this.$uv.test.empty(msg)) {
					this.$refs.toast.show({
						msg: msg
					})
					return
				}
				this.$nextTick(() => {
					let obj = {
						name: '',
						start: '',
						end: '',
						detail: ''
					}
					this.projects.push(obj)
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: white;
	}

	.edit-popup-btn {
		margin-left: 16px;
		margin-right: 16px;
		height: 44px;
		border-radius: 22px;
		font-size: 16px;
		font-weight: 400;
	}

	.edit-popup-cancel {
		color: #313C56;
		margin-top: 12px;
		margin-bottom: 12px;
		border: 1px solid #D4D7DB;
	}
</style>